<template>
    <div  @click="toggle" class="flex items-center space-x-1">
        <div class="inline-flex items-center justify-center w-4 h-4 border rounded-full"
            :class="{ 'border-gray-400': !checked, 'text-white bg-red-500 border-red-500': checked }">
            <IMdi:success v-show="checked" />
        </div>
        <div class="text-sm" v-if="label">{{ label }}</div>
    </div>
</template>
    
<script setup lang='ts'>
defineProps<{
    label?: string
}>()
const checked = ref(false);
const toggle = () => {
    checked.value = !checked.value
}
</script>
    
<style></style>